<template>
	<view class="page"  :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<c-nav-bar :title="titleHeader" ></c-nav-bar>
		<view class="hander">
			<view class="hander-title">
				请输入车牌号
			</view>
			<view class="hander-text">
				请绑定真实有效的车牌号，否则将无法正常使用车牌付费等功能
			</view>
			<view class="hander-car">
				<car-number-input @numberInputResult="numberInputResult"></car-number-input>
			</view>
		</view>
		<view class="colors">
			<text>请选择车牌颜色</text>
			<view class="items">
				<view v-for="(item,index) in carcolors" :key="index" :class="yindex===index?'active':''" @tap="selectCarColor(item,index)">
					{{item}}
					<view class="gbg" v-if="yindex===index">
						<image class="g_bg" src="@/static/index/steamerTicket/icon_gbg.png"></image>
						<image class="g_gou" src="@/static/index/steamerTicket/icon_gou.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="add" @tap="addLicense">立即绑定</view>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	export default {
		components: { GetPhoneNumber },
		data() {
			return {
				h:uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader:'绑定车牌',
				licence: '',
				yindex:'',
				plateType:'',
				carcolors:['蓝牌','黄牌','绿牌','黄绿牌','黑牌','白牌'],
			};
		},
		methods: {
			numberInputResult(e) {
				this.licence = e;
			},
			selectCarColor(item,index){
				this.yindex = index;
				this.plateType = item;
			},
			addLicense(){
				this.$login().then(res => {
					if (res === 0) {
						this.toBindLicence();
					} else {
						this.$refs['phoneNumber'].show = true;
					}
				})
			},
			loginSuccess(){
				this.toBindLicence();
			},
			toBindLicence(){
				if(!this.$reg.carNo(this.licence)) return this.$showToast('请输入正确的车牌');
				if(!this.plateType) return this.$showToast('请选择车牌颜色');
				
				this.$api.post('/travel/wisdom/BindingNumberplate/bdcp',{
					"openId": JSON.parse(uni.getStorageSync('userInfo')).openId,
					"numberplate": this.licence,
					"numberplateColour": this.yindex+1
				}).then(res=>{
					if(res.data.code===0){
						uni.navigateBack();
					}else this.$showModal(res.data.msg);
				})
			}
		}
	}
</script>

<style lang="less">
	.car-input-container {
		padding: 20rpx 5rpx 0 !important;
		margin: 20rpx 0 0 !important;
	}
	/deep/.car-input-box{
		width: calc(12.5% - 8rpx) !important;
		position: relative;
		&:nth-child(2){
			margin-right: 48rpx;
			&::after{
				content: '';
				width: 6rpx;
				height: 6rpx;
				background: #111111;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				margin-top: -3rpx;
				right: -26.5rpx;
			}
		}
	}
	/deep/.car-input-item{
		background: #FFFFFF;
		border: 2rpx solid #007A69;
	}

	.page {
		padding: 50rpx 24rpx;
		// padding-top: 130rpx;
		.hander {
			.hander-title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
			}

			.hander-text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 20rpx;
			}

			.hander-car {
				width: 100%;
				height: 124rpx;
				background: #F3F4F6;
			}
		}
		.colors{
			margin-top: 64rpx;
			&>text{
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.items{
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 30rpx;
				&>view{
					width: calc(100% / 6 - 12rpx);
					height: 54rpx;
					background: #F3F4F6;
					border-radius: 8rpx;
					line-height: 54rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-left: 12rpx;
					position: relative;
					
					&:first-child{
						margin-left: 0;
					}
					
					.gbg{
						width: 22rpx;
						height: 16rpx;
						background: #FFFFFF;
						border-radius: 8rpx 0rpx 8rpx 0rpx;
						position: absolute;
						right: 0;
						bottom: 0;
						image{
							position: absolute;
						}
						.g_bg{
							z-index: 1;
							width: 100%;
							height: 100%;
						}
						.g_gou{
							z-index: 2;
							width: 9rpx;
							height: 6rpx;
							left: 50%;
							margin-left: -4.5rpx;
							top: 50%;
							margin-top: -3rpx;
						}
					}
					
					&.active{
						background: #007A69;
						color: #FFFFFF;
					}
				}
			}
		}
		.add{
			width: calc(100% - 48rpx);
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			background: #007A69;
			border-radius: 46rpx;
			position: fixed;
			bottom: 64rpx;
			left: 24rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>